<template>
  <div class="container" @click="gallaryClick">
    <div class="wrapper">
      <swiper ref="mySwiper"  :options="swiperOption">
        <swiper-slide v-for="(item,index) of imgs" :key="index">
            <img  class="swiper-img gallary-img"  :src="item">
        </swiper-slide>
         
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    </div>
  </div>
</template>
<script>
 export default {
   props:{
     imgs:{
       type:Array,
       default(){
         return []
       }}
   },
   data () {
     return {
        swiperOption:{
            pagination:".swiper-pagination",
            paginationType: 'fraction',
            observeParents: true,
            observer: true
         }
     }
   },
   methods: {
     gallaryClick(){
       this.$emit("close")
     }
   },
   components: {
   }
 }
</script>
<style lang="stylus" scoped>
  .container >>> .swiper-container
    overflow inherit
  .container
    display flex
    justify-content center
    flex-direction column
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    background #000
    z-index 99
    .wrapper
      width 100%
      height 0
      padding-bottom 100%
      .gallary-img
         width 100%
      .swiper-pagination
        color #fff
        bottom -1rem
</style>

